<template>
    <div>
        <basic-container>
            <div class="app-container">
                <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
                    <el-form-item label="设备名称">
                        <el-select v-model="queryParams.facility_id" placeholder="请选择" clearable @clear="getList">
                            <el-option v-for="item in roleOptions" :key="item.facility_id" :label="item.name"
                                :value="item.facility_id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="日期查询">
                        <el-date-picker v-model="value" clearable @clear="getList" type="daterange"
                            value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="排班名称">
                    <el-select v-model="queryParams.owner_id" placeholder="请选择" clearable>
                        <el-option v-for="item in schedule" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                  </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="el-icon-download" size="mini"
                            @click="handleExport">导出</el-button>
                    </el-col>
                </el-row>
                <el-table v-loading="loading" :data="menuList" row-key="user_id" ref="table"
                    :default-expand-all="isExpandAll"
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                    <el-table-column prop="facility_name" label="设备名称"></el-table-column>
                    <el-table-column prop="kind" label="报警种类" align="center"></el-table-column>
                    <el-table-column prop="message" label="报警信息" align="center"></el-table-column>
                    <el-table-column prop="expenditure" label="报警时间/秒" align="center"></el-table-column>
                    <el-table-column prop="workplace" label="设备位置" align="center"></el-table-column>
                    <el-table-column prop="time" label="报警时间" align="center"></el-table-column>
                    <el-table-column prop="account" label="操作用户" align="center"></el-table-column>
                </el-table>
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.index"
                    :limit.sync="queryParams.size" @pagination="getList" />
                <!-- 添加或修改菜单对话框 -->
                <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body
                    :close-on-click-modal="false">
                    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                        <el-row>
                            <el-col :span="19">
                                <el-form-item label="设备名称" prop="name">
                                    <el-input v-model="form.name" placeholder="请输入工站名称" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="19">
                                <el-form-item label="设备编号" prop="serials">
                                    <el-input v-model="form.serials" placeholder="请输入工站编号" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="19">
                                <el-form-item label="设备工站" prop="station">
                                    <el-input v-model="form.station" placeholder="请输入设备工站" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="19">
                                <el-form-item label="设备存放地址" prop="workplace">
                                    <el-input v-model="form.workplace" placeholder="请输入设备存放地址" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="19">
                                <el-form-item label="设备添购日期" prop="time">
                                    <el-date-picker v-model="form.time" value-format="yyyy-MM-dd" type="date"
                                        placeholder="选择日期" style="width: 100%;">
                                    </el-date-picker>
                                </el-form-item>

                            </el-col>
                            <el-col :span="19">
                                <el-form-item label="设备有效日期" prop="expired">

                                    <el-date-picker v-model="form.expired" value-format="yyyy-MM-dd" type="date"
                                        placeholder="选择日期" style="width: 100%;">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">

                        <el-button @click="cancel">取 消</el-button>
                    </div>
                </el-dialog>
            </div>
        </basic-container>
    </div>
</template>

<script>
import { getandonlist, dlefacility, andonfacility } from "@/api/andon";
import { mapGetters } from "vuex";
// import * as XLSX from 'xlsx';
export default {
    data() {

        return {
            // 遮罩层   
            loading: false,
            // 显示搜索条件
            showSearch: true,
            value: [],
            total: 1,
            inMess: [],
            menuList: [],
            roleOptions: [],
            dataMuen: [{
                value: 0,
                label: '是'

            }, {
                value: 1,
                label: '否'
            },],
            options: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 是否展开，默认全部折叠
            isExpandAll: false,
            // 重新渲染表格状态
            refreshTable: true,
            schedule: [{
                value: 1,
                label: '白班'
            }, {
                value: 2,
                label: '晚班'
            }],
            // 查询参数
            queryParams: {
                start: null,
                index: 1,
                size: 10,
                owner_id:null,
                facility_id: null,
                finish: null,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                name: [
                    { required: true, message: "设备名称不能为空", trigger: "blur" }
                ],
                serials: [
                    { required: true, message: "设备编号不能为空", trigger: "blur" }
                ],
                station: [
                    { required: true, message: "设备工站不能为空", trigger: "blur" }
                ],
                workplace: [
                    { required: true, message: "设备地址不能为空", trigger: 'blur' }
                ],
                time: [
                    { required: true, message: "设备添购时间不能为空", trigger: "blur" }
                ],
                expired: [
                    { required: true, message: "设备有效日期不能为空", trigger: "blur" }
                ]
            }
        }

    },
    created() {

    },
    mounted() {
        var today = new Date();
        var year = today.getFullYear();
        var month = today.getMonth() + 1;
        var day = today.getDate();
        var formattedDate = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
        this.queryParams.start = formattedDate
        this.queryParams.finish = formattedDate
        this.value = [formattedDate, formattedDate]
        this.getList();
        this.gitandomID()
    },
    computed: {
        ...mapGetters(["userInfo", "menu"]),

    },
    methods: {
        // 匹配电话号码
        onPhoneInput(event) {
            let value = event
            // 使用正则表达式过滤非数字字符
            value = value.replace(/\D/g, '');
            // 更新输入框的值
            this.form.phone = value;
        },
        /** 查询菜单列表 */
        getList() {
            this.loading = true;
            getandonlist(this.queryParams).then(response => {
                this.menuList = response.data.data
                this.total = response.data.total;
                this.loading = false;
            })
        },
        // 取消按钮  
        cancel() {
            this.open = false;
            this.getList();
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                facility_id: null,
                workplace: null,
                serials: null,
                name: null,
                station: null,
                time: null,
                expired: null,

            };
        },
        //获取设备Id号
        gitandomID() {
            andonfacility().then((res) => {
                this.roleOptions = res.data.data
            })
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.start = this.value == null ? null : this.value.length > 0 ? this.value[0] : null
            this.queryParams.finish = this.value == null ? null : this.value.length > 0 ? this.value[1] : null
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.value = []
            this.queryParams = {
                start: null,
                index: 1,
                size: 10,
                facility_id: null,
                finish: null,
            }
            this.getList();

        },
        /** 新增按钮操作 */

        handleExport() {
            this.$confirm('是否将数据导出为EXcel文档？').then(() => {
                const params = new URLSearchParams();
                this.value.length == 0 ? '' : params.append('start', this.value[0]);
                this.value.length == 0 ? '' : params.append('finish', this.value[1]);
                this.queryParams.facility_id == null ? '' : params.append('sequence', this.queryParams.facility_id);
                   const url = new URL('http://192.168.20.252:8080/api/andon/output');
                url.search = params.toString();
                window.location.href = url.toString();
            })
        },
        /** 修改按钮操作 */
        handleUpdate(row) {

            this.reset()
            this.form = row
            this.open = true;
            this.title = "修改工站";
        },
        /** 提交按钮 */


        /** 删除按钮操作 */
        handleDelete(row) {

            this.$confirm('是否确认删除名称为"' + row.name + '"的设备？').then(() => {
                this.form = row
                dlefacility(this.form).then(() => {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.open = false;
                    this.getList();
                    this.reset();
                })
            }).catch(() => { });

        }
    }
};
</script>

<style></style>